<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="menu-table" lay-filter="menu-table"></table>
    </div>
</div>

<script type="text/html" id="menu-toolbar">
    <button class="layui-btn  layui-btn-sm" lay-event="add" sa:hasPermission="menu_add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<script type="text/html" id="menu-bar">
    <button class="layui-btn  layui-btn-sm" sa:hasPermission="menu_update" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" sa:hasPermission="menu_delete" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i>
    </button>
</script>


<script type="text/html" id="menu-enable">
    <input type="checkbox" name="status" value="{{d.menuId}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="menu-enable" {{ d.status== 0 ? 'checked' : '' }} />
</script>


<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery', 'treetable'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;

        window.render = function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'menuId',
                treePidName: 'parentId',
                skin: 'line',
                treeDefaultClose: true,
                toolbar: '#menu-toolbar',
                elem: '#menu-table',
                url: baseURL + 'menu/list',
                page: false,
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'title', minWidth: 200, title: '菜单名称', align: 'left'},
                        {field: 'description', title: '菜单描述', align: 'left'},
                        {field: "href", title: "url链接", align: 'left'},
                        {field: "menuSort", title: "菜单排序", align: 'center'},
                        // {field: 'enable', title: '是否可用', templet: '#menu-enable'},
                        {title: '操作', templet: '#menu-bar', width: 150, align: 'center'}
                    ]
                ]
            });
        }

        render();
        form.on('switch(menu-enable)', function (res) {
            $.ajax({
                url: baseURL + 'menu/enable/' + res.value,
                type: 'post'
            })
        })
        table.on('tool(menu-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })


        table.on('toolbar(menu-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#menu-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#menu-table");
            }
        });

        window.add = function () {
            layer.open({
                type: 2,
                title: '菜单新增',
                shade: 0.1,
                area: ['800px', '720px'],
                content: 'menu-add'
            });
        }

        window.edit = function (obj) {
            window.menuId = obj.data.menuId
            $.ajax({
                url: baseURL + "menu/getMenuByMenuId/" + obj.data.menuId,
                type: 'get',
                success: function (res) {
                    window.parentId = res.data.parentId
                }
            })
            $.ajax({
                url: baseURL + "menu/getPermissionIdsByMenuId",
                type: 'get',
                data: {
                    menuId: obj.data.menuId
                },
                success: function (res) {
                    window.permissionList = res.data
                    layer.open({
                        type: 2,
                        title: '菜单修改',
                        shade: 0.1,
                        area: ['800px', '720px'],
                        content: "menu-edit",
                        success: function (layero, index) {
                            let body = layer.getChildFrame('body', index)
                            let data = obj.data;
                            body.find('input[name=title]').val(data.title)
                            body.find('input[name=description]').val(data.description)
                            body.find('input[name=menuSort]').val(data.menuSort)
                            body.find('input[name=href]').val(data.href)
                            body.find('select[name=type]').val(data.type)

                        }
                    });
                }
            })

        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该菜单', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: baseURL + "menu/delete/" + obj.data['menuId'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        $.ajax({
                            url: baseURL + "config",
                            type: 'get',
                            success: function (param) {
                                // 发送消息到父页面
                                window.parent.postMessage({
                                    type: 'updateMenu',
                                    data: param
                                }, '*');
                            }
                        })
                        if (result.success) {
                            layer.msg(result.msg, {icon: 2, time: 2000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 1, time: 2000});
                        }
                        render()
                    }
                })
            });
        }
    })
</script>
</body>
</html>